<template>
	<view class="container">
		<view class="record-total">
			<view class="total">
				<text>总运行时长</text>
				<text>117.392h</text>
			</view>
			<view class="line"></view>
			<view class="total">
				<text>总充电时长</text>
				<text>38.075h</text>
			</view>
		</view>
		<view class="operating-trends-box">
			<view class="operating-trends-title">
				月运行趋势
			</view>
			<view class="operating-trends-echart">
				<view class="switch-button">
					<view class="button" @click="prevMonth" :class="{'enabled': canPrev}">
						<uni-icons type="arrow-left" color='#ffffff' size="20"></uni-icons>
					</view>
					<text class="date">{{curMothText}}</text>
					<view class="button" @click="nextMonth" :class="{'enabled': canNext}">
						<uni-icons type="arrow-right" color='#ffffff' size="20"></uni-icons>
					</view>
				</view>
				<view class="trends-echart">
					<l-echart ref="trendChartRef"></l-echart>
				</view>

			</view>

			<view class="operating-trends-table">
				<view v-for="i of 20" class="table-item">
					<text>7-8</text>
					<text>38.7min</text>
					<text class="soc">90.8% - 89.2%</text>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');


    // 初始化数据
    const months =ref(['8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月']) ;
	const oneData=ref([
					1.0, 2.9, 4.0, 13.2,7.0, 4.9, 7.0, 23.2, 25.6, 76.7,5.6,132.6
	 ])
	 const twoData=ref([
					3,1.4,7,2.6,8.4,5.9, 9.0, 26.4, 28.7, 70.7,7.8,125.9
				])
    const curMothText=ref('2024年-'+months.value[months.value.length - 1])
	const currentIndex =ref(months.value.length - 6) ;
	const canPrev = ref(true)
	const canNext = ref(false)
	const trendChartRef = ref(null)
	const trendChartoption = {
		legend: {
			data: ['月运行时长', '月充电时长'],
			itemGap: 50,
			formatter: function(name) {
				// 根据系列名称获取对应的数据
				var data = trendChartoption.series.find(series => series.name === name).data;
				// 返回系列名称加上最后一个数据值
				return `${name}: ${data[data.length - 1]}`;
			}
		},
		calculable: true,
		xAxis: [{
			type: 'category',
			data: months.value.slice(currentIndex.value,currentIndex.value + 6)
		}],
		yAxis: [{
			type: 'value',
			name: '时长'
		}],
		series: [{
				name: '月运行时长',
				type: 'bar',
				data: oneData.value.slice(currentIndex.value,currentIndex.value + 6) ,
				markPoint: {
					data: [{
						type: 'max',
						name: 'Max'
					}, ]
				},
			},
			{
				name: '月充电时长',
				type: 'bar',
				data:twoData.value.slice(currentIndex.value,currentIndex.value + 6),
				markPoint: {
					data: [{
						type: 'max',
						name: 'Max'
					}, ]
				},
			}
		]
	}


      function prevMonth() {
        if (currentIndex.value > 0) {
          currentIndex.value--;
          updateChart();

          // 更新按钮状态
          canPrev.value = true;
          if (currentIndex.value === 0) {
            canPrev.value = false;
          }
          canNext.value = true;
        }
      }
      function nextMonth() {
		 
        if (currentIndex.value < months.value.length - 6) {
          currentIndex.value++;
          updateChart();

          // 更新按钮状态
          canNext.value = true;
		   console.log(currentIndex.value,months.value.length - 6)
          if (currentIndex.value === months.value.length - 6) {
            canNext.value = false;
          }
          canPrev.value = true;
        }
      }
      async function updateChart() {
			const trendChart = await trendChartRef.value.init(echarts);
			trendChartoption.xAxis[0].data = months.value.slice(currentIndex.value, currentIndex.value + 6);
			curMothText.value = '2024 年-' + trendChartoption.xAxis[0].data.pop();

			// 更新月运行时长的 markPoint 数据
				const runData = [1.0, 2.9, 4.0, 13.2, 7.0, 4.9, 7.0, 23.2, 25.6, 76.7, 5.6, 132.6]
				.slice(currentIndex.value, currentIndex.value + 6);
				trendChartoption.series[0].markPoint.data = [{
					type:'max',
					name: 'Max',
					value: Math.max(...runData) 
				}];

				// 更新月充电时长的 markPoint 数据
				const chargeData = [3, 1.4, 7, 2.6, 8.4, 5.9, 9.0, 26.4, 28.7, 70.7, 7.8, 125.9]
				.slice(currentIndex.value, currentIndex.value + 6);
				trendChartoption.series[1].markPoint.data = [{
					type:'max',
					name: 'Max',
					value: Math.max(...chargeData) 
				}];

				trendChart.setOption(trendChartoption);
      }
	onMounted(() => {
		// 组件能被调用必须是组件的节点已经被渲染到页面上
		setTimeout(async () => {
			if (!trendChartRef.value) return
			const trendChart = await trendChartRef.value.init(echarts)
			trendChart.setOption(trendChartoption)
		}, 300)
	})
</script>

<style lang="scss">
	.record-total {
		display: flex;
		align-items: center;
		height: 150rpx;
		padding: 20rpx 0;
		background-color: #ffffff;

		.line {
			width: 1rpx;
			height: 100%;
			background-color: #f7f7f7;
		}

		.total {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			text {
				font-size: 30rpx;
				color: #969696;
				margin: 10rpx 0;
			}
		}
	}

	.operating-trends-title {
		padding: 20rpx;
		font-size: 30rpx;
	}

	.operating-trends-echart {
		height: 620rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;

		.switch-button {
			height: 100rpx;
			padding: 0 20rpx;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f7f7f7;
			.button{
				width:50rpx;
				height:50rpx;
				background-color: #cccccc;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.enabled{
				background-color: #4994ed;
			}
		}
		.trends-echart{
			// flex:1;
			// border:1px solid red;
			padding:20rpx 0;
		}
	}

	.operating-trends-table {
		background-color: #ffffff;

		.table-item {
			display: flex;
			align-items: center;
			height: 100rpx;
			border-bottom: 1px solid #f7f7f7;

			text {
				width: 25%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333333;
			}

			.tr {

				color: #969696;
			}

			.soc {
				width: 50%;
			}
		}
	}
</style>